<!-- 商品列表页 可切换布局 -->
<template>
	<view class="goodsContent" :style="{'--color': color}">
		<!-- 列表状态 -->
		<view class="hisGoodsList" v-if="type == 2 && goodsData.length > 0">
			<view @click="toGoods(item.goods_id, item.store_id)" class="hisGoods flex-box"
				v-for="(item, index) in goodsData" :key="index">
				<view class="p-re">
					<image class="hisImg radius"
						:src="item.img ? $imgUrls(item.img) : staticUrl + '/images/imageLoading.png'" mode="aspectFill">
					</image>
					<view class="masks height p-ab flexac" v-if="item.stock == 0">
						<image :src="$imgUrls('Uploads/diy/img/sold.png')" class="sold"></image>
					</view>
				</view>
				<view class="flex goodsmsg flex-box flex-between">
					<view>
						<view class="thmeTxt hisGoodsName lines2">
							<text v-if="item.type == 1" class="speTag">特价</text>
							<text v-if="item.type == 2" class="speTag">团购</text>
							{{ item.name }}
						</view>
						<view class="saled selfEnd flex-box align-center" v-if="hot == 1">
							<text>已售{{ item.sales_number }}</text>
							<text>热度{{ item.show_number }}</text>
						</view>
					</view>
					<view class="profitTitle_ lines" v-if="item.profitTitle">
						<text>{{ item.profitTitle }}</text>
					</view>
					<view class="prices flex-box flex-between a-center" style="margin-left: 0"
						v-if="item.buy_config.state == 1">
						<view>
							<view class="priceNow">
								<text
									class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
								<template
									v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
								<template
									v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
							</view>
						</view>
						<!-- 	<text class="lines">
							{{ item.price_description }}
						</text> -->
						<view class="position flex-box align-center"
							v-if="startUp.enableLbs.state == 1 && positionshow == 1 && item.distance">
							<text class="iconfont icon-dingwei"></text>
							<text class="txt">
								{{ parseFloat(item.distance) > 999 ? (parseFloat(item.distance) / 1000).toFixed(2) + 'km' : parseFloat(item.distance).toFixed(2) + 'm' }}
							</text>
						</view>

						<view class="shopName" @click.stop="openPop(item)" v-if="cart">{{ item.price_name }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 平铺状态 -->
		<view class="flex-box flex-between repeatGoodsList my-box" v-if="type == 1 && goodsData.length > 0">
			<waterfallsFlow ref="waterfallsFlow_" :list="goodsData" @image-click="toDetail" imageSrcKey="img"
				idKey="goods_id" :offset="12">
				<!-- #ifndef H5  -->
				<view v-for="(item, index) of goodsData" :key="index" slot="slot{{index}}" class="goods-box-msg"
					@click="toDetail(item)">
					<view class="thmeTxt lines2 hisGoodsName2">
						<text v-if="item.type == 1" class="speTag">特价</text>
						<text v-if="item.type == 2" class="speTag">团购</text>
						{{ item.name }}
					</view>
					<view class="saled" v-if="hot == 1">
						<text>已售{{ item.sales_number }}</text>
						<text>热度{{ item.show_number }}</text>
					</view>
					<view class="profitTitle_ lines" v-if="item.profitTitle">
						<text>{{ item.profitTitle }}</text>
					</view>
					<view class="prices flex-box flex-between a-center" v-if="item.buy_config.state == 1">
						<view>
							<view class="priceNow ">
								<text
									class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
								<template
									v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
								<template
									v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
							</view>
						</view>
						<view class="position flex-box align-center"
							v-if="startUp.enableLbs.state == 1 && positionshow == 1 && item.distance">
							<text class="iconfont icon-dingwei"></text>
							<text class="txt">
								{{ parseFloat(item.distance) > 999 ? (parseFloat(item.distance) / 1000).toFixed(2) + 'km' : parseFloat(item.distance).toFixed(2) + 'm' }}
							</text>
						</view>

						<view class="shopName" @click.stop="openPop(item)" v-if="cart">{{ item.price_name }}</view>
					</view>

					<view class="maskObtained" v-if="item.state == 0">
						<image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
					</view>
				</view>
				<!--  #endif -->
				<!-- #ifdef H5 -->
				<template v-slot:default="{ item }">
					<view class="goods-box-msg">
						<view class="thmeTxt lines2 hisGoodsName2">
							<text v-if="item.type == 1" class="speTag">特价</text>
							<text v-if="item.type == 2" class="speTag">团购</text>
							{{ item.name }}
						</view>
						<view class="saled" v-if="hot == 1">
							<text>已售{{ item.sales_number }}</text>
							<text>热度{{ item.show_number }}</text>
						</view>
						<view class="profitTitle_ lines" v-if="item.profitTitle">
							<text>{{ item.profitTitle }}</text>
						</view>
						<view class="prices flex-box flex-between" v-if="item.buy_config.state == 1">
							<view class="priceNow">
								<text
									class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
								<template
									v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
								<template
									v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
									<text class="priceReg myPrice">{{ item.full_price }}</text>
								</template>
							</view>
							<view class="position flex-box align-center"
								v-if="startUp.enableLbs.state == 1 && positionshow == 1 && item.distance">
								<text class="iconfont icon-dingwei"></text>
								<text class="txt">
									{{ parseFloat(item.distance) > 999 ? (parseFloat(item.distance) / 1000).toFixed(2) + 'km' : parseFloat(item.distance).toFixed(2) + 'm' }}
								</text>
							</view>
						</view>
					</view>
					<view class="maskObtained" v-if="item.state == 0">
						<image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
					</view>
				</template>
				<!-- #endif -->
			</waterfallsFlow>
		</view>

		<specsPopup :showPopup="showPopup" :pageData="info" @close="showPopup = false" @getCart="getCart" />
		<showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import waterfallsFlow from './waterfall/waterfall.vue';
	import specsPopup from '@/components/specsPopup.vue'
	export default {
		components: {
			waterfallsFlow,
			specsPopup
		},
		/**
		 * type: 1瀑布流  2列表
		 * hot:是否显示热度 0不显示 1显示
		 *
		 * **/
		props: ['goodsData', 'type', 'hot', 'positionshow', 'cart'],
		data() {
			return {
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				showPopup: false,
				info: '',
				showModal: false
			};
		},
		methods: {
			toDetail(goods) {
				this.toGoods(goods.goods_id, goods.store_id);
			},
			openPop(item) {
				if (!this.vid) return this.showModal = true
				this.info = item
				this.showPopup = true
			},
			getCart() {
				this.$emit('getCart')
			}
		},
		computed: {
			...mapState(['startUp', 'color', 'vid'])
		}
	};
</script>

<style scoped lang="scss">
	/* 商品列表 */
	.hisGoodsList {
		padding: 30rpx 24rpx;

		.hisImg {
			width: 200rpx;
			height: 200rpx;
			margin: 0 24rpx 0 0;
			border-radius: 8rpx;
		}

		.masks {
			width: 200rpx;
			background: rgba(0, 0, 0, 0.4);
			top: 0;
			left: 0;

			.sold {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.speTag {
			margin-right: 4rpx;
		}

		.color333 {
			color: #333333;
			padding: 0;
			font-size: 26rpx;

			.bg {
				display: none;
			}
		}

		.prices {
			margin: 10rpx 8rpx 0 16rpx;

			.priceNow {
				margin-right: 10rpx;

				.price {
					font-size: 32rpx;
					color: $uni-color-price;
				}
			}

			.priceReg {
				color: #999;
				text-decoration: line-through;

				.price {
					color: #999;
					text-decoration: line-through;
				}
			}

			.position {
				text {
					font-size: 26rpx;
					color: #666666;
					margin-left: 6rpx;
				}
			}
		}

		.hisGoods {
			margin-bottom: 26rpx;
			border-bottom: 1px solid #e0e0e0;
			padding-bottom: 26rpx;
			position: relative;

			&:nth-last-of-type(1) {
				border-bottom: none;
			}

			.goodsmsg {
				flex-direction: column;

				.selfEnd {
					margin-top: 20rpx;
				}

				.hisGoodsName {
					margin-bottom: 10rpx;
					line-height: 36rpx;
					font-size: 28rpx;
				}

				.saled {
					text {
						color: #888888;
						font-size: 24rpx;
						padding-right: 20rpx;
						border-right: 1px solid #dddddd;
						margin-right: 20rpx;
						line-height: 20rpx;

						&:nth-last-of-type(1) {
							border: none;
						}
					}
				}
			}
		}
	}

	.shopName {
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
		background-color: #ff4b4e;
		font-size: 22rpx;
		color: white;
		flex-shrink: 0;
	}
</style>